<script setup>

import { ref, watch, watchEffect } from 'vue'

const price = ref(100)


const vip = ref(0)
const svip = ref(0)

// watch(price, (newPrice, currentPrice) => {
//     console.log(newPrice, currentPrice);

//     vip.value = newPrice * 0.9
//     svip.value = newPrice * 0.5


//     console.log('qqqqqq:', document.querySelector('h1').innerText);
// }, {
//     // immediate: true,
//     deep: true,
//     flush: 'post' // 设置调用的时机，等到 DOM 更新之后才会执行
// })

// 类似于我们使用的计算属性
watchEffect(() => {
    // 写在里面的所有数据都会被监听
    vip.value = price.value * 0.9
    svip.value = price.value * 0.5
})

</script>
<template>
    <div>
        <h1>原价： {{ price }},VIP: {{ vip }},svip: {{ svip }}</h1>
        <button @click="price++">修改 price</button>
    </div>
</template>